@charset "utf-8";

//@import "reset";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}
*{
    margin: 0;
    padding: 0;
    font-family: "楷体";
    font-size: 0px;
}

html,body{ 
    width: 100%;
}
#web{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .charge-head{
        width: 100%;
        height:r(760);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .charge-title{
        width: 100%;
        height: r(400);
        background:url(../img/charge/charge_title.jpg);
        background-size: 100% 100%;
        margin: 0;
        padding: 0;
        font-size: 0px;
        .charge-title1{
            display: inline-block;
            padding: r(35) 0 0 r(35);
            width: r(266);
            height: r(350);
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title-size{
                position: absolute;
                top: r(116);
                left:r(68);
                width: r(208);
                height: r(89);
                font-size: r(22);
                line-height: r(30);
                color: #8f7046;
                letter-spacing: r(2);
            }
        }
        .charge-title2{
            display: inline-block;
            padding: r(35) 0 0 r(42);
            width: r(266);
            height: r(350);
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title-size{
                position: absolute;
                top: r(116);
                left:r(100);
                width: r(150);
                height: r(58);
                font-size: r(22); 
                line-height: r(30);
                color: #8f7046;
                p{
                    font-size: r(22);
                    text-align: left;
                }
                 p:first-child{
                     text-indent: r(12);
                 }
            }
        }
    }
    .charge-money{
        width: 100%;
        height: r(984);
        background: url(../img/charge/charge_money.jpg);
        background-size: 100% 100%;
        .money-content{
            width: r(575);
            height: r(796);
            padding: r(29) 0 0 r(35);
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .money-quan{
                position: absolute;
                top: r(122);
                left: r(70);
                width: r(506);
                height: r(677);
                border-radius: r(14);
                .quan-li1{
                    width: 50%;
                    height: r(141);
                    float: left;
                    .quan-li1-title{
                        margin-top: r(33);
                        width: 100%;
                        height: r(32);
                        line-height: r(32);
                        font-size: r(25);
                        text-align: center;
                        color: #8f7046;
                    }
                    .quan-li1-img{
                        width: r(219);
                        height: r(70);
                        margin: r(9) auto 0;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .money-button{
                    float: left;
                    width: 100%;
                    height: r(48);
                    margin-top: r(30);
                    .money-img{
                        position: relative;
                        width: r(285);
                        height: r(74);
                        margin: 0 auto;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        .img-title{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: r(74);
                            line-height: r(74);
                            text-align: center;
                            color: #fbe6a8;
                            font-size: r(19);
                        }
                    }
                }
            }
        }
    }
}
